<template>
  <el-dialog title="建成时间" class="check-form-dialog" :visible.sync="isShow">
    <el-form
      ref="checkForm"
      :model="checkForm"
      :rules="checkFormRules"
      label-width="100px"
    >
      <el-form-item label="建成时间" prop="buildTime">
        <el-checkbox-group
          v-model="checkForm.buildTime"
          @change="handleCheckChange"
        >
          <el-checkbox
            v-for="(item, index) in buildTimeList"
            :key="index"
            :label="item.value"
            name="type"
          >
            {{ item.label }}
          </el-checkbox>
          <el-input
            v-if="inputShow"
            v-model="buildYear"
            class="ckd-input"
            placeholder="请输入年份"
            maxlength="4"
          >
            <template slot="append">年</template>
          </el-input>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      checkForm: {
        buildTime: []
      },
      checkFormRules: {
        buildTime: [
          {
            required: true,
            message: '为必填项',
            trigger: ['blur', 'change']
          }
        ]
      },
      buildTimeList: [
        {
          value: '1',
          label: '1980年及以前'
        },
        {
          value: '2',
          label: '1981-1990年'
        },
        {
          value: '3',
          label: '1991-2000年'
        },
        {
          value: '4',
          label: '2001-2010年'
        },
        {
          value: '5',
          label: '2011-2015年'
        },
        {
          value: '6',
          label: '2016年及之后'
        },
        {
          value: '0',
          label: '具体年份'
        }
      ],
      inputShow: false,
      buildYear: null
    };
  },
  methods: {
    handleCheckChange() {
      if (this.checkForm.buildTime.indexOf('0') > -1) {
        this.inputShow = true;
      } else {
        this.inputShow = false;
        this.buildYear = null;
      }
    }
  }
};
</script>

<style lang="scss" >
.check-form-dialog {
  .ckd-input{
    width: 200px !important;
    margin-left: 36px;
  }
}
</style>
